<template>
  <Card v-style="'boxstyle_bg_1'">
    <template #header>
      <div class="header">
        <img src="@/assets/webmasterData/icon7.png" alt="" />
        <span>邮箱排名</span>
      </div>
    </template>
    <div id="main" ref="main"></div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, defineProps, toRefs } from "vue";
import * as echarts from "echarts";
import Card from "@/components/Card";
import { echartsAutoPlay } from "@/utils/echarts";
const main = ref();

import { bigDataApi } from "@/api/bigData";
import store from "@/store";

let date = 'day';

const props = defineProps({
  selectdate:{
    type: String,
    default: 'day'
  }
})
const { selectdate } = toRefs(props);

console.log(props)

watch(
  selectdate,
  (e) => {
    // console.log(e)
    date = e;
    getRankingEmailData();
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  // getRankingEmailData();
});
async function getRankingEmailData() {
  const result = await bigDataApi.rankingEmail({
    date: date,
    token: store.getters.user.token,
    is_asc: 1
  });
  const { data } = result;
  console.log(data)
  // 初始化图表
  setEcharts(data.data);
}
function setEcharts(data) {
  if(data.length > 0){
    var dataList = []
    data.forEach((item,index) => {
      dataList.push(
        { value: item.url_count, name: item.email }
      );
    });
   var myChart = echarts.init(main.value);
  }
  var option = {
    tooltip: {
      extraCssText: "z-index:999",
      confine: true,
      backgroundColor: "rgba(255,255,255,0.8)",
    },
    legend: {
      bottom: "1%",
      textStyle: {
        color: "#C8EAF9",
      },
      icon: "circle",
      itemWidth: 10,  // 设置宽度
      itemHeight: 10 // 设置高度
    },
    series: [
      {
        type: "pie",
        radius: ["20%", "50%"],
        center: ["50%", "35%"],
        label: {
          show: true,
          color: "#CBD2D5",
        },
        data: dataList,
      },
    ],
  };

  myChart.setOption(option);
  echartsAutoPlay(option,myChart)
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
}
#main {
  width: 100%;
  height: 100%;
}
</style>
